<template>
	<view class="container padding ">

		<view class="padding-sm">商品相关</view>
		<view class="grid col-3">
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="LiveShopModal">直播商品</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="LiveSizeModal">直播规格选择</button>
		</view>
		<!-- 主播推荐商品 -->
		<cu-dialog-goods :modalName="modalName" :lists="lists.goods_list" @onHideModal="hideModal"></cu-dialog-goods>

		<!-- 商品规格选择框 -->
		<cu-dialog-goods-specification :modalName="modalName" :datas="lists.live" @onHideModal="hideModal"></cu-dialog-goods-specification>

		<view class="padding-sm">直播相关</view>
		<view class="grid col-3">
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="LiveMenuModal">直播菜单栏</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="LiveModal">直播详情</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="LiveRecordModal">直播记录</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="SpectatorModal">在线观众</button>

			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="AllianceModal">选择联盟直播间</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="LiveComplainModal">直播投诉</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="fansTeamListModal">粉丝团成员列表</button>

		</view>
		<!-- 直播菜单栏 -->
		<cu-dialog-menu :modalName="modalName" @onHideModal="hideModal" @onchange="onShowMenu"></cu-dialog-menu>

		<!-- 直播详情 -->
		<cu-dialog-details :modalName="modalName" :lists="lists.totals" @onHideModal="hideModal"></cu-dialog-details>

		<!-- 在线观众 -->
		<cu-dialog-spectator :modalName="modalName" :lists="lists.examples" @onHideModal="hideModal"></cu-dialog-spectator>

		<!-- 直播回放 -->
		<cu-dialog-playback :modalName="modalName" :lists="lists.goods_list" @onHideModal="hideModal"> </cu-dialog-playback>

		<!-- 选择联盟直播间 -->
		<cu-dialog-alliance :modalName="modalName" :lists="lists.goods_list" @onHideModal="hideModal"> </cu-dialog-alliance>

		<!-- 直播投诉 -->
		<cu-dialog-complain :modalName="modalName" :lists="lists.causes" @onHideModal="hideModal"> </cu-dialog-complain>
		
		<!-- 粉丝团列表 -->
		<cu-dialog-fans-list :modalName="modalName" @onHideModal="hideModal"></cu-dialog-fans-list>
		
		
		<view class="padding-sm">打赏与充值</view>
		<view class="grid col-3">
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="RewardAnchorModal">打赏主播</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="GitfModal">礼物对话框</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="RechargeModal">充值</button>
		</view>

		<!-- 送礼物给主播 -->
		<cu-dialog-gift :modalName="modalName" :lists="lists.gifts" @onHideModal="hideModal"> </cu-dialog-gift>
		<!-- 打赏主播 -->
		<cu-dialog-reward :modalName="modalName" :lists="lists.moneys" @onHideModal="hideModal"></cu-dialog-reward>
		<!-- 充值框 -->
		<cu-dialog-recharge :modalName="modalName" :lists="lists.coins" @onHideModal="hideModal"></cu-dialog-recharge>

		<view class="padding-sm">榜单榜</view>
		<view class="grid col-3">
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="GiftPKModal">礼物PK榜</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="InviteGiftPKModal">邀请PK榜</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="FansModal">粉丝团</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="FansGroupModal">粉丝团人员</button>
		</view>

		<!-- 礼物pk榜 -->
		<cu-dialog-pkgift :modalName="modalName" :lists="lists.examples" @onHideModal="hideModal"> </cu-dialog-pkgift>

		<!-- 邀请pk榜 -->
		<cu-dialog-pkinvite :modalName="modalName" :lists="lists.examples" @onHideModal="hideModal"> </cu-dialog-pkinvite>

		<!-- 粉丝团 -->
		<cu-dialog-fans :modalName="modalName" :lists="lists.examples" @onHideModal="hideModal"> </cu-dialog-fans>

		<!-- 粉丝团人员 -->
		<cu-dialog-fansgroup :modalName="modalName" :lists="lists.examples" @onHideModal="hideModal"> </cu-dialog-fansgroup>



		<view class="padding-sm">红包_金额</view>
		<view class="grid col-3">
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="LiveMoneyModal">打赏金额</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="SeedRedPacketModal">发送红包</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="RedPacketRecordModal">红包记录</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="RedPacketModal">红包</button>
		</view>
		<!-- 红包 -->
		<cu-dialog-redpacket :modalName="modalName" tag="RedPacketModal" @onHideModal="hideModal"></cu-dialog-redpacket>
		<!-- 发送红包 -->
		<cu-publish-redpacket :modalName="modalName"  @onHideModal="hideModal"></cu-publish-redpacket>
		<!-- 观众打赏主播金额 -->
		<cu-dialog :show="modalName" tag="LiveMoneyModal">
			<block slot="content">
				<view class="padding-sm">标题</view>
				<button class="cu-btn bg-blue" @click="hideModal">关闭</button>
			</block>
		</cu-dialog>



		<!-- 红包领取记录 -->
		<cu-dialog :show="modalName" tag="RedPacketRecordModal">
			<block slot="content">
				<view class="padding-sm">标题</view>
				<button class="cu-btn bg-blue" @click="hideModal">关闭</button>
			</block>
		</cu-dialog>



		<view class="padding-sm">分享</view>
		<view class="grid col-3">
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="ShareMenuModal">分享菜单</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="SharePosterModal">分享海报</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="DialogueModal">对话框</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="CommentModal">评论框</button>
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="MediaModal">微信</button>
		</view>

		<!-- 分享菜单 -->
		<cu-dialog-share :modalName="modalName" :datas="shareInfo" @onHideModal="hideModal"></cu-dialog-share>

		<!-- 二维码识别 -->
		<cu-dialog-media :shareUrl="qrcode" :modalName="modalName" @onHideModal="hideModal"></cu-dialog-media>

		<!-- 分享海报 -->
		<cu-dialog :show="modalName" tag="SharePosterModal">
			<block slot="content">
				<view class="padding-sm">分享海报</view>
				<button class="cu-btn bg-blue" @click="hideModal">关闭</button>
			</block>
		</cu-dialog>

		<!-- 对话框 -->
		<cu-dialog-base content="请问您需要特殊服务吗?" rightstr="需要" leftstr="不需要" :modalName="modalName" @onHideModal="hideModal"></cu-dialog-base>


		<!-- 评论框 -->
		<cu-dialog-comment :modalName="modalName" :lists="comments" @onHideModal="hideModal"></cu-dialog-comment>

		<view class="padding-sm">蒙版提示</view>
		<view class="grid col-3">
			<button class="cu-btn bg-green lg margin-xs" @click="showModal" data-target="ForeshowModal">直播预告</button>
		</view>
		<!-- 直播预告 -->
		<cu-dialog :show="modalName" tag="ForeshowModal" bgColor="">
			<block slot="content">
				<view class="padding-sm text-size-30 text-white">直播主题</view>
				<view class="padding-sm text-size-30 text-white">今天17:30直播</view>
				<view class="flex text-center justify-center">
					<button class="cu-btn bg-blue radius" @click="hideModal">分享直播间</button>
					<button class="cu-btn bg-blue radius margin-left-sm" @click="hideModal">预告提醒</button>
				</view>

			</block>
		</cu-dialog>
	</view>
</template>

<script>
	import cuDialog from '@/components/dialog/cu-dialog.vue';
	//红包展示
	import cuDialogRedpacket from '@/components/dialog/cu-dialog-redpacket.vue';
	//发布红包
	import cuPublishRedpacket from '@/components/dialog/cu-publish-redpacket.vue';
	//测试数据
	import testData from './test.js';
	//直播礼物
	import cuDialogGoods from '@/components/dialog/cu-dialog-goods.vue';
	//直播菜单
	import cuDialogMenu from '@/components/dialog/cu-dialog-menu.vue';
	//直播详情
	import cuDialogDetails from '@/components/dialog/cu-dialog-details.vue';
	//在线观众
	import cuDialogSpectator from '@/components/dialog/cu-dialog-spectator.vue';
	//商品规格选择
	import cuDialogGoodsSpecification from '@/components/dialog/cu-dialog-goods-specification.vue';
	//打赏金额
	import cuDialogReward from '@/components/dialog/cu-dialog-reward.vue';
	//打赏金额
	import cuDialogRecharge from '@/components/dialog/cu-dialog-recharge.vue';
	//回放
	import cuDialogPlayback from '@/components/dialog/cu-dialog-playback.vue';
	//礼物
	import cuDialogGift from '@/components/dialog/cu-dialog-gift.vue';
	//投诉
	import cuDialogComplain from '@/components/dialog/cu-dialog-complain.vue';
	//粉丝团列表
	import cuDialogFansList from '@/components/dialog/cu-dialog-fans-list.vue';
	//联盟
	import cuDialogAlliance from '@/components/dialog/cu-dialog-alliance.vue';
	//pk礼物榜
	import cuDialogPkgift from '@/components/dialog/cu-dialog-pkgift.vue';
	//pk邀请榜
	import cuDialogPkinvite from '@/components/dialog/cu-dialog-pkinvite.vue';
	//分享菜单
	import cuDialogShare from '@/components/dialog/cu-dialog-share.vue';
	//评论
	import cuDialogComment from '@/components/dialog/cu-dialog-comment.vue';
	//图文对话框
	import cuDialogMedia from '@/components/dialog/cu-dialog-media.vue';
	//文字对话框
	import cuDialogBase from '@/components/dialog/cu-dialog-base.vue';
	//粉丝团
	import cuDialogFans from '@/components/dialog/cu-dialog-fans.vue';
	//粉丝团人员
	import cuDialogFansgroup from '@/components/dialog/cu-dialog-fansgroup.vue';
	export default {
		name: 'testDialog',
		components: {
			cuDialog,
			cuDialogGoods,
			cuDialogMenu,
			cuDialogDetails,
			cuDialogSpectator,
			cuDialogGoodsSpecification,
			cuDialogReward,
			cuDialogPlayback,
			cuDialogGift,
			cuDialogComplain,
			cuDialogFansList,
			cuDialogAlliance,
			cuDialogPkgift,
			cuDialogPkinvite,
			cuDialogShare,
			cuDialogComment,
			cuDialogRedpacket,
			cuDialogRecharge,
			cuDialogMedia,
			cuDialogBase,
			cuDialogFans,
			cuDialogFansgroup,
			cuPublishRedpacket
		},
		data() {
			return {
				modalName: null,
				lists: testData,
				shareInfo: {
					title: '你的好友分享了一个视频',
					image: 'https://h5.qianmabo.com/img/logo.jpg'
				},
				comments: [

				],
				qrcode: 'https://h5.qianmabo.com/img/logo.jpg'
			}
		},
		onShow() {
			this.modalName = null;
		},
		methods: {
			onShowMenu(e){
				console.log(e);
				if(e=='clear'){
					this.$util.showToast("清理成功")
					return;
				}
				this.modalName = null;
				setTimeout(res=>{
					this.modalName =e;
				},1000)
				
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
			},
			hideModal(e) {
				this.modalName = null;
			},
			onClickMenu(e) {
				console.log(e);
			}

		}
	}
</script>

<style scoped>

</style>
